<template>
    <div>
        <el-card>
            <template>
                <h3>菜品列表</h3>
            </template>
            <!-- 搜素区域 -->
            <el-form inline :model="foodSearchData">
                <el-form-item label="菜品名称">
                    <el-input v-model="foodSearchData.foodName"></el-input>
                </el-form-item>
                <el-form-item label="菜品分类">
                    <el-select v-model="foodSearchData.categoryId" style="width: 160px">
                        <el-option v-for="item in foodCategoryArr" :label="item.categoryName" :value="item.categoryId"
                            :key="item.categoryId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loadFoodList">搜索</el-button>
                    <el-button type="success" @click="add">添加菜品</el-button>
                </el-form-item>
            </el-form>
            <!-- 数据区域 -->
            <el-table :data="tableData" border>
                <el-table-column type="expand">
                    <template #default="props">
                        <el-descriptions :column="2" border>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">菜品名称</div>
                                </template>
                                {{ props.row.foodName }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">菜品分类</div>
                                </template>
                                {{ props.row.categoryName }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">菜品介绍</div>
                                </template>
                                {{ props.row.foodExplain }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">菜品图片</div>
                                </template>
                                <img :src="props.row.foodImg" alt="" width="150" />
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">菜品价格</div>
                                </template>
                                {{ props.row.foodPrice }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">库存</div>
                                </template>
                                {{ props.row.stock }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">状态</div>
                                </template>
                                <el-tag v-if="props.row.status == 0" type="success">
                                    在售
                                </el-tag>
                                <el-tag v-else-if="props.row.status == 1" type="danger">
                                    售罄
                                </el-tag>
                                <el-tag v-else-if="props.row.status == 2" type="info">
                                    下架
                                </el-tag>
                            </el-descriptions-item>
                        </el-descriptions>
                    </template>
                </el-table-column>
                <el-table-column prop="foodName" label="菜品名称"></el-table-column>
                <el-table-column prop="foodExplain" label="菜品介绍"></el-table-column>
                <el-table-column prop="foodPrice" label="菜品价格"></el-table-column>
                <el-table-column prop="stock" label="菜品库存">
                    <template #default="scope">
                        <el-tooltip v-if="scope.row.stock > 10" content="库存充足" effect="light" placement="top">
                            <el-tag type="success">{{ scope.row.stock }}</el-tag>
                        </el-tooltip>
                        <el-tooltip v-else-if="scope.row.status <= 10" content="库存不足" effect="dark" placement="top">
                            <el-tag type="danger">{{ scope.row.stock }}</el-tag>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="菜品状态">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status == 0" type="success">在售</el-tag>
                        <el-tag v-else-if="scope.row.status == 1" type="danger">
                            售罄
                        </el-tag>
                        <el-tag v-else-if="scope.row.status == 2" type="info">
                            下架
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="categoryName" label="菜品分类"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="handleEdit(scope.row)" size="small">
                            修改
                        </el-button>
                        <el-button type="danger" @click="handleDelete(scope.row)" size="small">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <template #footer>
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[2, 3, 5, 10]" layout="total, sizes,  prev, pager, next" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </template>
        </el-card>
        <!-- 添加菜品弹窗 -->
        <el-dialog v-model="dialogFormVisible" :title="title" width="500">
            <el-form :model="foodForm" label-width="80px">
                <el-form-item label="菜品名称">
                    <el-input v-model="foodForm.foodName" placeholder="菜品名称" />
                </el-form-item>
                <el-form-item label="菜品图片">
                    <el-upload class="avatar-uploader" action="http://127.0.0.1:8080/javaweb_ele/upload"
                        :show-file-list="false" :on-success="handleAvatarSuccess">
                        <img v-if="foodForm.foodImg" :src="foodForm.foodImg" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="菜品价格">
                    <el-input v-model="foodForm.foodPrice" placeholder="菜品价格" />
                </el-form-item>
                <el-form-item label="库存">
                    <el-input v-model="foodForm.stock" placeholder="库存" />
                </el-form-item>
                <el-form-item v-if="title == '修改菜品'" label="状态">
                    <el-select v-model="foodForm.status">
                        <el-option label="上架" :value="0" />
                        <el-option label="下架" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="foodForm.remarks" placeholder="备注" />
                </el-form-item>
                <el-form-item label="菜品介绍">
                    <el-input type="textarea" v-model="foodForm.foodExplain" placeholder="菜品介绍" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitData"> 提交 </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { ElNotification } from "element-plus";
import * as foodAPI from "@/api/food";
export default {
    data() {
        return {
            // 弹框参数
            dialogFormVisible: false,
            title: "添加菜品",
            //弹窗里输入的数据传到这个对象中
            foodForm: {},
            // 分页参数
            currentPage: 1,
            pageSize: 5,
            total: 0,
            //搜索数据
            foodSearchData: {},
            // 菜品分类的数组
            foodCategoryArr: [],
            // 数据列表
            tableData: [],
            shopId: "",
          
            
        };

    },
    methods: {
        // 图片上传之后之后，触发的函数
        handleAvatarSuccess(res) {
            this.foodForm.foodImg = res;
        },
        //分页的函数
        handleSizeChange() {
            this.loadFoodList();
        },
        handleCurrentChange() {
            this.loadFoodList();
        },
        // 点击添加菜品按钮
        add() {
            this.dialogFormVisible = true;
            this.title = "添加菜品";
            this.foodForm = {};
        },
        
        // 点击修改菜品按钮
        handleEdit(row) {
            this.dialogFormVisible = true;
            this.title = "修改菜品";
            this.foodForm = row;
        },
        // 点击页面上的删除按钮
        handleDelete(row) {
        
            foodAPI
                .deleteFoodAPI({ foodId: row.foodId, op: "delete" })
                
                .then((resp) => {
                    if (resp.data == 1) {
                        this.loadFoodList();
                    }
                });
        },
        // 点击弹窗中的提交按钮
        submitData() {
            // 判断是添加还是修改
            if (this.title == "添加菜品") {
                let categoryId = this.$route.query.categoryId;
                
                foodAPI
                    .addFoodAPI({
                        ...this.foodForm,
                        shopId: this.shopId,
                        categoryId,
                        op: "add",
                    })
                    .then((resp) => {
                        if (resp.data == 1) {
                            this.dialogFormVisible = false;
                            this.loadFoodList();
                        }
                    });
            } else {
                foodAPI
                    .updateFoodAPI({ ...this.foodForm, op: "update" })
                    .then((resp) => {
                        if (resp.data == 1) {
                            this.dialogFormVisible = false;
                            this.loadFoodList();
                        }
                    });
            }
        },
        // 加载当前店铺的所有菜品分类
        loadFoodCategoryList() {
            // 拥有店铺的id，根据店铺id查询当前店铺下的所有的菜品的分类数据
            foodAPI.findAllFoodCategoryAPI({ shopId: this.shopId }).then((resp) => {
                this.foodCategoryArr = resp.data;
            });
        },
        // 加载菜品数据
        loadFoodList() {
            foodAPI
                .findFoodListAPI({
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    foodName: this.foodSearchData.foodName,
                    categoryId: this.foodSearchData.categoryId,
                    shopId: this.shopId,
                    op: "find",
                })
                .then((resp) => {
                    this.total = resp.data.total;
                    this.tableData = resp.data.datas;
                });
                
                
        },
        
    },
    created() {
        // 需要查询的是某个店铺下的菜品分类，需要传递当前的店铺的id
        let shopId = this.$route.query.shopId;
        // 没有携带店铺的id，不能直接去查询数据
        if (!shopId) {
            ElNotification.error("请先选择一个店铺");
            this.$router.push("/shopList");
            return;
        }
        this.shopId = shopId;
        // 加载页面菜品分类的下拉框数据
        this.loadFoodCategoryList();
        // 加载表格的菜品数据
        this.loadFoodList();
        
    },
};
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>